<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form inline>
        <el-form-item label="商品名/关键词：" class="filter-item">
          <el-input placeholder="请输入商品名/关键词" size="medium" v-model="name"></el-input>
        </el-form-item>
        <el-form-item label="上架状态：" class="filter-item">
          <el-select v-model="status" size="medium">
            <el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="前台类目：" class="filter-item">
          <el-cascader
            clearable
            filterable
            expand-trigger="hover"
            :options="frontCategoryOptions"
            v-model="selectedOptionsFront"
            @change="categoryChange($event, 1)">
          </el-cascader>
        </el-form-item>
        <el-form-item label="后台类目：" class="filter-item">
          <el-cascader
            clearable
            filterable
            expand-trigger="hover"
            :options="backCategoryOptions"
            v-model="selectedOptionsBack"
            @change="categoryChange($event, 2)">
          </el-cascader>
        </el-form-item>
        <el-form-item class="filter-item right">
          <el-button icon="el-icon-search" plain type="primary" @click="search" size="medium">搜索</el-button>
          <el-button icon="el-icon-setting" plain type="primary" @click="resetSearch" size="medium">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="operator-container">
      <el-button icon="el-icon-plus" type="primary" @click="clickToEditProduct" class="operator-item"  size="small">新增商品</el-button>
    </div>
    <table-list :data="productList">
      <template slot="columns">
        <el-table-column fixed="left" label="商品ID" align="center" width="70px" >
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column fixed="left" label="商品名称" align="center" min-width="250px">
          <template slot-scope="scope">
            <div class="flex flex-item--center">
              <el-popover
                placement="top-start"
                trigger="hover">
                <img :src="scope.row.coverCn" class="previewImage">
                <img :src="scope.row.coverCn" class="thumbnail"  slot="reference">
              </el-popover>
              <span class="block-right">{{scope.row.nameCn}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="实际售价" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.price | divideFilter}}
          </template>
        </el-table-column>
        <el-table-column label="VIP价格" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.priceVip | divideFilter}}
          </template>
        </el-table-column>
        <el-table-column label="库存" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.stock }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="销量" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.sales }}
          </template>
        </el-table-column> -->
        <el-table-column label="是否上架" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.status == 1 ? '上架':'下架' }}
          </template>
        </el-table-column>
        <el-table-column label="前台类目" align="center" min-width="150px">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.category" :key="index">{{ item.nameCn }}</div>
          </template>
        </el-table-column>
        <el-table-column label="后台类目" align="center" min-width="150px">
          <template slot-scope="scope">
            {{ scope.row.categoryManager.nameCn }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="300px">
          <template slot-scope="scope">
            <el-button plain type="primary" size="mini" @click="clickToEditProduct(scope.row)">编辑</el-button>
            <el-button plain type="danger" size="mini" @click="clickToDelete(scope.row)">删除</el-button>
            <el-button plain type="warning" size="mini" @click="clickToOperateProduct(scope.row, 1)" v-if="!scope.row.status">上架</el-button>
            <el-button plain type="warning" size="mini" @click="clickToOperateProduct(scope.row, 0)" v-else>下架</el-button>
            <el-button plain type="primary" size="mini" @click="getCommissionList(scope.row)">分佣比例</el-button>
          </template>
        </el-table-column>
      </template>
    </table-list>
    <list-pagination :total="total" :page="page" :pageSize="pageSize" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange"></list-pagination>
    <profit-dialog :visible="profitDialogVisible" @closeDialog="profitDialogVisible = false" :dialogData="commissionList" @sureDialog="updateCommission"></profit-dialog>
  </div>
</template>

<script>
import list from '@/mixins/List'
import table from '@/components/Table'
import listPagination from '@/components/ListPagination'
import profitDialog from './components/profitDialog'
import { getProductList, getListCategory, delProduct, operateProduct, updateCommission, getCommissionList } from '@/api/product'
import { categoryFilter } from '@/filter'

export default {
  name: 'productList',
  components: {
    'table-list': table,
    listPagination,
    profitDialog
  },
  mixins: [list],
  extends: {},
  props: {},
  data () {
    return {
      name: '',
      status: '',
      category: '',
      categoryManager: '',
      selectedOptionsFront: [],
      selectedOptionsBack: [],
      productList: [],
      frontCategoryList: [],
      backCategoryList: [],
      statusList: [
        {
          name: '下架',
          value: '0'
        },
        {
          name: '上架',
          value: '1'
        }
      ],
      profitDialogVisible: false,
      commissionList: []
    }
  },
  computed: {
    frontCategoryOptions () {
      return this.frontCategoryList.map(categoryFilter)
    },
    backCategoryOptions () {
      return this.backCategoryList.map(categoryFilter)
    }
  },
  directives: {},
  filters: {},
  created () {},
  mounted () {
    this.getList()
    this.getCategory()
  },
  watch: {},
  methods: {
    resetSearch () {
      this.name = ''
      this.status = ''
      this.category = ''
      this.categoryManager = ''
      this.selectedOptionsFront = []
      this.selectedOptionsBack = []
    },
    categoryChange (selectList, type) {
      if (type === 1) {
        this.category = selectList[1]
      } else {
        this.categoryManager = selectList[1]
      }
    },
    async getList () {
      let { data } = await getProductList({
        name: this.name,
        status: this.status,
        category: this.category,
        categoryManager: this.categoryManager,
        pageNum: this.page,
        pageSize: this.pageSize
      })
      this.productList = data.list
      this.total = data.total
    },
    async getCategory () {
      this.frontCategoryList = await this.getCategoryList(1)
      this.backCategoryList = await this.getCategoryList(2)
    },
    async getCategoryList (categorytype) {
      let { data } = await getListCategory({
        categorytype,
        pageNum: '',
        pageSize: ''
      })
      return data
    },
    search () {
      this.page = 1
      this.getList()
    },
    clickToEditProduct ({ id }) {
      this.$router.push({ name: 'productEdit', query: { productId: id } })
    },
    clickToDelete ({ id }) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delProduct({ id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async clickToOperateProduct ({ id }, status) {
      await operateProduct({
        id,
        status
      })
      this.$message({
        type: 'success',
        message: status ? '上架成功' : '下架成功'
      })
      this.getList()
    },
    async getCommissionList ({ id }) {
      let { data } = await getCommissionList({ id })
      this.commissionList = data
      this.profitDialogVisible = true
    },
    async updateCommission (data) {
      await updateCommission(data)
      this.$message({
        type: 'success',
        message: '分佣比例修改成功'
      })
      this.profitDialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
